<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏修复测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .test-section {
            background: rgba(255, 255, 255, 0.1);
            margin: 20px 0;
            padding: 20px;
            border-radius: 10px;
            backdrop-filter: blur(10px);
        }

        button {
            background: #4CAF50;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }

        button:hover {
            background: #45a049;
        }

        .status {
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }

        .connected {
            background: rgba(76, 175, 80, 0.3);
            border: 1px solid #4CAF50;
        }

        .disconnected {
            background: rgba(244, 67, 54, 0.3);
            border: 1px solid #f44336;
        }

        .log {
            background: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 5px;
            height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <h1>🎮 游戏修复测试</h1>

    <div class="test-section">
        <h2>修复内容</h2>
        <ul>
            <li>✅ 修复了SetReady方法中的Guid解析错误</li>
            <li>✅ 前端现在使用玩家昵称而不是ID调用SetReady</li>
            <li>✅ 改进了连接状态检查和调试信息</li>
            <li>✅ 添加了更好的错误处理</li>
        </ul>
    </div>

    <div class="test-section">
        <h2>测试步骤</h2>
        <ol>
            <li>确保后端服务正在运行：<code>dotnet run --project backend/RealtimeCollabGame.API</code></li>
            <li>确保前端服务正在运行：<code>cd frontend/game && npm run dev</code></li>
            <li>访问前端应用：<a href="http://localhost:5173" target="_blank">http://localhost:5173</a></li>
            <li>创建或加入房间</li>
            <li>测试准备按钮功能</li>
            <li>检查连接状态显示</li>
        </ol>
    </div>

    <div class="test-section">
        <h2>预期结果</h2>
        <ul>
            <li>✅ 前端显示"已连接"状态</li>
            <li>✅ 房主可以正常点击"准备就绪"按钮</li>
            <li>✅ 准备状态变更实时同步到其他玩家</li>
            <li>✅ 不再出现"玩家不存在"错误</li>
            <li>✅ 不再出现"Unrecognized Guid format"错误</li>
        </ul>
    </div>

    <div class="test-section">
        <h2>修复的文件</h2>
        <ul>
            <li><code>backend/RealtimeCollabGame.Infrastructure/SignalR/GameHub.cs</code> - 修复Guid解析</li>
            <li><code>frontend/game/src/views/GameView.vue</code> - 修复SetReady调用</li>
            <li><code>frontend/game/src/services/socketService.js</code> - 改进连接状态检查</li>
        </ul>
    </div>

    <div class="test-section">
        <h2>如果仍有问题</h2>
        <p>请检查浏览器控制台的错误信息，并确保：</p>
        <ul>
            <li>后端服务在 http://localhost:5152 正常运行</li>
            <li>前端服务在 http://localhost:5173 正常运行</li>
            <li>没有CORS错误</li>
            <li>SignalR连接成功建立</li>
        </ul>
    </div>

    <script>
        // 简单的连接测试
        async function testConnection() {
            try {
                const response = await fetch('http://localhost:5152/api/games');
                if (response.ok) {
                    console.log('✅ 后端API连接正常');
                } else {
                    console.log('❌ 后端API连接失败');
                }
            } catch (error) {
                console.log('❌ 后端API连接错误:', error);
            }
        }

        // 页面加载时测试连接
        window.onload = function () {
            console.log('🔧 游戏修复测试页面已加载');
            testConnection();
        };
    </script>
</body>

</html>